<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pushup Counter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 50px;
            background-image: url('static/BG3.jpg');
            background-size: 100%;
        }
        #sidebar {
            width: 200px;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: linear-gradient(to bottom, rgba(173, 216, 230, 0.7), rgba(173, 216, 230, 0.3));
            color: white;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: auto;
            text-align: center;
        }
        #sidebar p {
            font-family: Verdana, sans-serif;
            white-space: pre-line; /* 允许换行 */
            color: #2C3539;
            font-size: 16px;

        }

        #video {
            display: block;
            margin: 20px auto;
            border: 2px solid #333;
            border-radius: 8px;
        }
        #encouragement {
            font-size: 1.5em;
            margin-bottom: 20px;
            color: #D3D3D3;
        }
        #datetime {
            color: white;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <div id="sidebar">
        <p>
        Some Tips:<br>
        1. Hands beneath shoulders, fingers forward at a 45-degree angle.<br>
        2. Tighten core muscles to keep the body in a straight line.<br>
        3. Inhale down, exhale up. Maintain steady breathing.<br>
        4. Arms at shoulder width or slightly wider to engage chest.
        </p>
    </div>
    <img id="video" width="640" height="480" src="/video_feed">
    <div id="encouragement">Loading encouragement...</div>
    <div id="datetime"></div>




    <script>
      const encouragements = [
        "You've got this!",
        "Keep pushing forward!",
        "Believe in yourself!",
        "Every effort counts!",
        "You're making progress!",
        "Don't give up, you're stronger than you think!",
        "Persistence pays off!",
        "One step at a time, you're getting there!",
        "You're doing amazing!",
        "Your effort today is your success tomorrow!"
    ];
    function getRandomEncouragement() {
        const randomIndex = Math.floor(Math.random() * encouragements.length);
        return encouragements[randomIndex];
    }

    function updateEncouragement() {
        const encouragementElement = document.getElementById('encouragement');
        encouragementElement.textContent = getRandomEncouragement();
    }

    function updateDateTime() {
    const dateTimeElement = document.getElementById('datetime');
    const currentDate = new Date();
    const options = {
       weekday: 'long',
       year: 'numeric',
       month: 'long',
       day: 'numeric',
       hour: 'numeric',
       minute: 'numeric',
       second: 'numeric',
       timeZoneName: 'short'
    };
    const formattedDateTime = currentDate.toLocaleDateString('en-US', options);
    dateTimeElement.textContent = formattedDateTime;
    }

    // Initial update
    updateEncouragement();
    // Initial update
    updateDateTime();
    // Set interval to update every 5 seconds (adjust as needed)
    setInterval(updateEncouragement, 3000);
    // Set interval to update every 1 second (adjust as needed)
    setInterval(updateDateTime, 1000);
    </script>
</body>
</html>


